<template>
  <div class="base-form-view-container">
    <a-tabs :default-active-key="1">
      <a-tab-pane
        v-for="tabItem in tabsData" 
        :key="tabItem.key"
        :tab="tabItem.tab">
        <component :is="tabItem.component"></component>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import BaseForm from './compontents/BaseForm'
import BaseEchoForm from './compontents/BaseEchoForm'
import BaseFormModel from './compontents/BaseFormModel'
import BaseEchoFormModel from './compontents/BaseEchoFormModel'

export default {
  name: 'BaseFormView',
  components: {
    BaseForm,
    BaseEchoForm,
    BaseFormModel,
    BaseEchoFormModel
  },
  data() {
    return {
      tabsData: [
        { key: 1, tab: "基础表单（a-form）", component: 'BaseForm' },
        { key: 2, tab: "基础表单-回显（a-form）", component: 'BaseEchoForm' },
        { key: 3, tab: "基础表单（a-form-model）", component: 'BaseFormModel' },
        { key: 4, tab: "基础表单-回显（a-form-model）", component: 'BaseEchoFormModel' },
      ],
    }
  },
}
</script>

<style lang="scss">
.form-view-container {
  .form-container {
    margin-top: 20px;
  }
}
</style>